<template>
  <div class='content'>
    <div class="profile_page">
      <head-top :go-back='goBack' :head-title="profiletitle"></head-top>
    </div>
    <div class="formContain">
      <titlebar :title-left='titleLeft'></titlebar>
      <ul>
        <li class="flex">
          <span class="label">姓名</span>
          <div>
            <van-field v-model="datas.name" type="text" input-align="right" readonly/>
          </div>
        </li>
        <!--<li class="flex">
          <span class="label">性别</span>
          <div>
            <van-field v-model="datas.sex=='01001'?'男':'女'" type="text" input-align="right" readonly/>
          </div>
        </li>-->
        <li class="flex">
            <span class="label">部门</span>
            <div>
                        <span style="font-size: 0.48rem">
                            {{datas.deptId | dictNum('org')}}
                        </span>
            </div>
        </li>
          <li class="flex">
              <span class="label">岗位</span>
              <div>
                        <span style="font-size: 0.48rem">
                            {{datas.postId | dictNum('post')}}
                        </span>
              </div>
          </li>
      </ul>

    </div>
    <div class="formContain">
      <titlebar :title-left='titleLeft1'></titlebar>
      <ul>
        <li class="flex">
          <span class="label">姓名</span>
          <div>
            <van-field  v-model="datas.name" type="text" input-align="right" readonly/>
          </div>
        </li>
        <li class="flex">
          <span class="label">部门</span>
          <div>
               <span style="font-size: 0.48rem">
                {{datas.deptId|dictNum('org')}}
              </span>
          </div>
        </li>
        <li class="flex">
          <span class="label">申请时间</span>
          <div>
              <span style="font-size: 0.48rem">
                {{datasSave.applyTime}}
              </span>
          </div>
        </li>
          <li class="flex" v-if="!show4">
              <span class="label">申请内容</span>
              <div>
                  <input type="text" placeholder="请选择" style="padding-right: 0" :value="datasSave.applyType|dictNum('apply')" readonly>
              </div>
          </li>
          <li class="flex" v-if="show4">
              <span class="label">申请内容</span>
              <div>
                  <input type="text" placeholder="请选择" style="padding-right: 0" :value="datasSave.applyType|dictNum('applyType')" readonly>
              </div>
          </li>
        <li class="flex" v-if="show1">
          <span class="label">使用时间</span>
          <div>
            <input type="text"  placeholder="请选择时间" :value="datasSave.useTime|dateFormat"  readonly>
            <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
          </div>
        </li>
        <li class="flex" v-if="show1">
          <span class="label">计划归还时间</span>
          <div>
            <input type="text"  placeholder="请选择时间" :value="datasSave.backTime|dateFormat"  readonly>
            <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
          </div>
        </li>
        <li class="flex" v-if="show3">
          <span class="label">使用时间</span>
          <div>
            <input type="text"  placeholder="请选择时间" :value="datasSave.useTime"  readonly>
            <img src="@/assets/images/img/calendarIcon.png" alt="" srcset="" >
          </div>
        </li>
        <li class="flex" v-if="show2">
          <span class="label">结算收据张数（门诊）</span>
          <div>
            <van-field class='full_width' v-model="datasSave.outpatientBills" placeholder="请输入结算收据张数（门诊）" type="text" input-align="right" readonly/>
          </div>
        </li>
        <li class="flex" v-if="show2">
          <span class="label">结算收据张数（住院）</span>
          <div>
            <van-field class='full_width' v-model="datasSave.hospitalizationBills" placeholder="请输入结算收据张数（住院）" type="text" input-align="right" readonly/>
          </div>
        </li>
          <li class="flex" v-if="show4">
              <span class="label">申述类型</span>
              <div>
                  <input type="text" placeholder="请选择" style="padding-right: 0" :value="datasSave.representType|dictNum('representType')"
                         readonly>
              </div>
          </li>
          <li class="flex" v-if="show4">
              <span class="label">考核记录</span>
              <div>
                  <input type="text" placeholder="请选择" style="padding-right: 0" :value="datasSave.assessmentRecordName" readonly>
              </div>
          </li>
          <li class="flex" v-if="show4">
              <span class="label">原考核结果</span>
              <div>
                  <input type="text" style="padding-right: 0" placeholder="请选择" :value="datasSave.beforeAssessmentResult|dictNum('0408')"
                         readonly>
              </div>
          </li>
          <li class="flex" v-if="show4">
              <span class="label"><i class="require">*</i>现考核结果</span>
              <div @click="showpicker($event,'nowAssessmentResult','考核结果','0408')">
                  <input type="text" placeholder="请选择" :value="datasSave.nowAssessmentResult|dictNum('0408')"
                         readonly>
                  <span class="iconfont icon-xiala"></span>
              </div>
          </li>
        <li class="flex">
          <span class="label">申请说明</span>
          <div  style="min-height:2rem">
            <van-field class='full_width'  style="height: 3rem;" v-model="datasSave.remark" placeholder="请输入申请说明" type="textarea" input-align="right" readonly/>
          </div>
        </li>
        <li class="flex">
          <span class="label"><i class="require">*</i>回馈说明</span>
          <div style="min-height:2rem">
            <van-field class='full_width' style="height: 3rem;" v-model="datasSave.feedback" type="textarea"
                       input-align="right"/>
          </div>
        </li>
      </ul>
    </div>
    <div class="align_center foot-button">
      <van-button class="cancel-btn" type="primary" @click="$router.go(-1)">取消</van-button>
      <van-button class="primary-btn" type="primary" @click="saveData">提交</van-button>
    </div>
      <van-popup v-model="pickershow" position="bottom">
          <van-picker show-toolbar :title="title" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>
      </van-popup>
  </div>
</template>

<script>
  var that;
  import headTop from '@/components/header/head'
  import titlebar from '@/components/titlebar3/titlebar3';
  import {getUserInfo, getBasicInfo, saveCertificate, getDataByTaskId,updateCloseSysTask} from '@/service/getData';
  import {getStore, getDefault} from '@/assets/config/mUtils';
  import {Dialog, Toast} from 'vant';
  import MyNumberInput from '@/components/numberInput/numberInput';
  import {getUser} from '@/service/getData';

  export default {
    data() {
      return {
	      company: "",//所属公司
	      profiletitle: '待办事项',
	      goBack: true,
	      titleLeft: '基本信息',
	      titleLeft1: '申请信息',
	      show: false, //控制日期显示隐藏
	      pickershow: false,//控制下拉选显示隐藏
	      pickerName: '',//当前控制日期的控件
	      currentTime: new Date(),
	      title: '',
	      fileName: '',
	      show1: false,
	      show2: false,
	      show3: false,
	      show4: false,
	      feedback: '',
	      datas: {
		      name: '',
		      sex: '',
		      birth: '',
		      partyFigure: '',
		      residentPlace: '',
		      remark: '',
		      nowHomePlace: "",
	      },
	      datasSave: {
		      applyTime: "",
		      feedPersonId: '',
		      feedPersonName: '',
		      feedTime: '',
		      feedback: '',
		      feedbackType: "",
		      personId: "",
		      personName: "",
		      remark: "",
		      subid: "",
		      taskId: "",
		      applyType: '',
		      useTime: '',
		      backTime: '',
		      outpatientBills: '',
		      hospitalizationBills: '',
		      representType: '',
		      beforeAssessmentResult: '',
		      nowAssessmentResult: '',
		      assessmentRecord: '',
		      assessmentRecordName: '',
	      },
	      partyFigureText: '',
	      lookUrl: '',
	      taskUrl: '',
	      taskId: '',
	      taskType: '',
	      useType: 'apply',
	      screenHeight: '',
	      applyType: '',
	      codeSet: {},
	      columns: [],
	      applyData: [],
	      representData: [],
      }
    },
    created() {
      that = this;
      this.codeSet = this.$store.state.codeSet;
      var taskType = this.$route.params.taskType;
      var empId = this.$route.params.empId;
      var taskId = this.$route.params.taskId;
      var taskRelationId = this.$route.params.taskRelationId;
      this.taskType = taskType;
      this.taskId = taskId;
      if(taskType == '3185000023'){
        this.lookUrl = '/mvc/selfmattercertificate/save';
        this.taskUrl ='/mvc/selfmattercertificate/getDataByTaskId';
        this.columns =[{id:'10',text:'在职证明'},{id:'20',text:'收入证明'},{id:'30',text:'工作证明'},{id:'40',text:'婚育证明'},{id:'50',text:'社保缴费证明'},{id:'60',text:'内退证明'},{id:'70',text:'退休证明'},{id:'80',text:'实习证明'},{id:'90',text:'其他'}];
      }else if(taskType == '3185000024'){
        this.taskUrl ='/mvc/selfmatterhouseholdregistercard/getDataByTaskId';
        this.lookUrl = '/mvc/selfmatterhouseholdregistercard/save';
        this.columns = [{id:'10',text:'本人户籍卡'},{id:'20',text:'户口首页复印件'},{id:'30',text:'本人户籍卡和户口首页复印件'}];
        this.show1 = true;
      }else if(taskType == '3185000025'){
        this.taskUrl ='/mvc/selfmattercontract/getDataByTaskId';
        this.lookUrl = '/mvc/selfmattercontract/save';
        this.columns = [{id:'10',text:'劳动合同原件'},{id:'20',text:'劳动合同复印件'}];
        this.show1 = true;
      }else if(taskType == '3185000026'){
        this.taskUrl ='/mvc/selfmatterlicense/getDataByTaskId';
        this.lookUrl ='/mvc/selfmatterlicense/save';
        this.columns = [{id:'10',text:'因公护照'},{id:'20',text:'因公港澳通行证'},{id:'30',text:'因公台湾通行证'},{id:'40',text:'因私护照'},{id:'50',text:'因私港澳通行证'},{id:'60',text:'因私台湾通行证'}];
        this.show1 = true;
      }else if(taskType == '3185000027'){
        this.taskUrl ='/mvc/selfmattersocial/getDataByTaskId';
        this.lookUrl =  '/mvc/selfmattersocial/save';
        this.columns = [{id:'10',text:'个人缴费信息制定查询'},{id:'20',text:'办理社会保险转移接续'}
          ,{id:'30',text:'社保定点医疗机构变更'},{id:'40',text:'医疗保险异地备案'},{id:'50',text:'医疗费用手工报销'}
          ,{id:'60',text:'生育津贴申领'},{id:'70',text:'生育产前检查费申领'},{id:'80',text:'工伤认定、鉴定'},{id:'90',text:'工伤相关待遇申领'},{id:'100',text:'其他'}];
      }else if(taskType == '3185000028'){
        this.taskUrl ='/mvc/selfmatterpaycost/getDataByTaskId';
        this.lookUrl = '/mvc/selfmatterpaycost/save';
        this.columns = [{id:'10',text:'补充医疗二次报销'},{id:'20',text:'人身意外险报销'}];
        this.show2 = true;
      }else if(taskType == '3185000029'){
        this.taskUrl ='/mvc/selfmatteraccumulationfund/getDataByTaskId';
        this.lookUrl = '/mvc/selfmatteraccumulationfund/save';
        this.columns = [{id:'10',text:'租房提取'},{id:'20',text:'买房提取'},{id:'30',text:'约定提取'},{id:'40',text:'其他提取'}];
      }else if(taskType == '3185000030'){
        this.taskUrl ='/mvc/selfmatterarchive/getDataByTaskId';
        this.lookUrl = '/mvc/selfmatterarchive/save';
        this.columns = [{id:'10',text:'人事档案查阅'}];
        this.show3 = true;
      }else if(taskType == '3185000031'){
        this.taskUrl ='/mvc/selfmatterperformance/getDataByTaskId';
        this.lookUrl ='/mvc/selfmatterperformance/save';
        this.show4 = true;
	      this.applyData = [{id: '10', text: '领导人员考核结果'}, {id: '20', text: '员工履职考核结果'}];
	      this.representData = [{id: '10', text: '年度考核结果'}, {id: '20', text: '日常考核结果'}];
      };
      var data = {};
      data.app_userId = getStore('user_id');
      data.id = empId;
      data.CHECK_TIME = new Date().getTime().toString();
      data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
      getBasicInfo(data).then(res1 => {
        console.log(res1);
        this.datas = res1.data;
            var dict0120 = [{"pid":"-1","id":"0120000001","text":"中共党员"},{"pid":"-1","id":"0120000002","text":"预备中共党员"},{"pid":"-1","id":"0120000003","text":"共青团员"},{"pid":"-1","id":"0120000004","text":"群众"},{"pid":"-1","id":"0120000005","text":"其他"}]
            for (var i = 0; i < dict0120.length; i++) {
              if (dict0120[i].id == this.datas.partyFigure) {
                this.partyFigureText = dict0120[i].text;
              }
            }

      });
      data.taskId = taskId;
      getDataByTaskId(this.taskUrl,data).then(res => {
        console.log(res);
        if(res.data!=null){
          this.datasSave = res.data;
        }

      })
    },
    mounted() {
      const _self = this;
      this.screenHeight = document.documentElement.clientHeight;
    },
    components: {
      headTop,
      titlebar,
      MyNumberInput
    },
    updated() {
      let that = this;
      this.$nextTick(function () {
        let $inputs = Array.from(document.getElementsByTagName('input'));
        /*let body = document.body;
        $inputs.forEach(item => { // 定时器是处理多个input间快速切换闪屏问题，可省略
            item.onblur = function () { // onblur是核心方法
                clearTimeout(body.timer);
                body.timer = setTimeout(() => {
                window.scroll(0, 0);
                window.innerHeight = window.outerHeight = that.screenHeight
                }, 150)
            }
            item.onfocus = function () {
                clearTimeout(body.timer)
            }
        })*/
        let body = document.body;
//        $inputs.forEach(item => {
//          item.onblur = function () { // onblur是核心方法
//            window.scroll(0, 0);
//            window.innerHeight = window.outerHeight = that.screenHeight;
//            //console.log(that.screenHeight);
//          }
//        })
      })
    },
    filters:{
      dictNum:function(val,arg1){
        if(val!="" && val != undefined&& val != null){
          if(arg1 == 'apply'){
            var arr = that.columns.filter(item=>item.id === val);
//          console.log(val,arr);
            return arr[0].text;
          } else if (arg1 == 'applyType') {
	          var arr = that.applyData.filter(item => item.id === val);
//          console.log(val,arr);
	          return arr[0].text;
          } else if (arg1 == 'representType') {
	          var arr = that.representData.filter(item => item.id === val);
//          console.log(val,arr);
	          return arr[0].text;
          }else {
            var arr = that.codeSet[arg1].filter(item=>item.id === val);
//          console.log(val,arr);
            return arr[0].text;
          }
        }

      },
	    dateFormat(val){
		    if(val!="" && val != undefined&& val != null){
			    var date = new Date(val);
			    var nVal = date.getFullYear() + '-' + that.addZero(date.getMonth() + 1) + '-' + that.addZero(date.getDate());
			    return nVal;
            }
        }
    },
    methods: {
	    addZero(num) {
		    var addNum = num < 10 ? "0" + num : num;
		    return addNum;
	    },
	    showpicker(event, name, title, code) {
		    this.columns = this.codeSet[code];
		    this.pickershow = true;
		    this.pickerName = name;
		    this.title = title;
	    },
	    onConfirm(value) {
		    this.$set(this.datasSave, this.pickerName, value.id);
		    this.pickershow = false;
		    console.log(this.datasSave);
	    },
	    onCancel() {
		    this.pickershow = false;
	    },
	    saveData() {
		    console.log(this.datasSave.feedback == '');
		    if(this.taskType == '3185000031'){
			    if (this.datasSave.nowAssessmentResult == ''||this.datasSave.nowAssessmentResult == null) {
				    Toast({
					    message: '请选择现考核结果',
					    duration: '1000',
				    });
				    return;
			    }
		    };
		    if (this.datasSave.feedback == '') {
			    Toast({
				    message: '请输入回馈说明',
				    duration: '1000',
			    });
			    return;
		    };
		    Toast.loading({
			    duration: 0,   // 持续展示 toast
			    mask: true,
			    message: '正在提交...'
		    });

		    var data = this.datasSave;
		    data.app_userId = getStore('user_id');
		    data.CHECK_TIME = new Date().getTime().toString();
		    data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME + "3a28fba00c015e0df7f88556c91cb7fc");
		    data.feedbackType = '3675000002';
		    console.log(data);
		    saveCertificate(this.lookUrl, data).then(res => {
//			    Toast.clear();
//			    this.$router.go(-1);
			    var updata = getDefault();
			    updata.taskId = this.taskId;
			    updateCloseSysTask(updata).then(res => {
				    Toast.clear();
				    this.$router.go(-1);
			    })
		    })
	    },

    }
  }

</script>

<style lang="scss" scoped>
  @import '../../../assets/style/mixin';
  @import '../../../assets/style/public';

  .formContain {
    background: #fff;
    ul {
      padding: 0 .54rem;
      .flex {
        justify-content: space-between;
        align-items: center;
        line-height: 2rem;
        border-bottom: 1px solid #e0e0e0;
        padding: 0 .3rem;
        &:nth-last-of-type(1) {
          border: none;
        }
        .label {
          font-size: .56rem;
          line-height: 2rem;
          color: #333333;
        }
        div {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          position: relative;
          flex-grow: 1;
          img {
            width: .68rem;
            height: .64rem;
          }
          input {
            color: #323233;
            text-align: right;
            font-size: .48rem;
           /* padding-right: .48rem;*/
            border: none;
            &:-ms-input-placeholder {
              color: #aaa;
              font-size: .48rem;

            }
          }
          .file {
            width: 2rem;
            height: 1rem;
            font-size: 10rem;
            opacity: 0;
            position: absolute;
            right: 0;
          }
          .van-cell {
            font-size: .48rem;
            padding-right: .48rem;
            padding: 0;
            color: #aaa;
            .van-field__control {
              color: #aaa;
            }
          }

        }
      }
    }
  }

  .foot-button {
    margin-top: 2rem;
    margin-bottom: .4rem;
    .cancel-btn {
      margin-right: 1rem;
    }
  }

  #datetime-picker, #picker {
    position: fixed;
    width: 100%;
    bottom: 0;
  }

  .require {
    color: red;
    margin-right: 4px;
    font-style: inherit;
    font-size: 14px;
  }
</style>
